import Vue from "vue";
import VueRouter from "vue-router";

// 导入组件  页面
// import Login from "../views/login/Login.vue";
// import Layout from "../views/layout/Index.vue";

// import Chart from "@/views/layout/chart/Index";
// import User from "@/views/layout/user/Index";
// import Enterprise from "@/views/layout/enterprise/Index";
// import Question from "@/views/layout/question/Index";
// import Subject from "@/views/layout/subject/Index";
// import NotFound from "../views/404/NotFound.vue";
// import Home from "../views/layout/welcome/Index.vue";

// 动态导入组件页面 ,实现懒加载
// 路由懒加载，为了提高加载的性能（当路由访问到的时候，再加载，提高首屏访问的效率）

const Login = () => import('../views/login/Login.vue')
const Layout = () => import('../views/layout/Index.vue')
const Chart = () => import('@/views/layout/chart/Index')
const User = () => import('@/views/layout/user/Index')
const Enterprise = () => import('@/views/layout/user/Index')
const Question = () => import('@/views/layout/enterprise/Index')
const Subject = () => import('@/views/layout/subject/Index')
const NotFound = () => import('../views/404/NotFound.vue')
const Home = () => import('../views/layout/welcome/Index.vue')




;



// 按需导入
import {
  getToken
} from "../views/utils/token";

Vue.use(VueRouter);
const router = new VueRouter({
  // 路由规则
  routes: [{
      path: "/login",
      component: Login,
      // 路由 元信息
      meta: {
        title: "登入",
      },
    },
    {
      path: "/",
      redirect: "/login",
    },
    {
      path: "/layout",
      component: Layout,
      redirect: "/layout/welcome",

      children: [{
          path: "welcome",
          component: Home,
          meta: {
            title: "首页",
            icon: "el-icon-s-home",
            fullPath: "/layout/welcome",
            roles: ["超级管理员", "管理员", "老师", "学生"],
          },
        },
        {
          path: "chart",
          component: Chart,
          meta: {
            title: "数据预览",
            icon: "el-icon-pie-chart",
            fullPath: "/layout/chart",
            roles: ["超级管理员", "管理员", "老师"],
          },
        },
        {
          path: "user",
          component: User,
          meta: {
            title: "用户列表",
            icon: "el-icon-user",
            fullPath: "/layout/user",
            roles: ["超级管理员", "管理员", "老师"],
          },
        },
        {
          path: "enterprise",
          component: Enterprise,
          meta: {
            title: "企业列表",
            icon: "el-icon-office-building",
            fullPath: "/layout/enterprise",
            roles: ["超级管理员", "管理员", "老师"],
          },
        },
        {
          path: "question",
          component: Question,
          meta: {
            title: "题库列表",
            icon: "el-icon-edit-outline",
            fullPath: "/layout/question",
            roles: ["超级管理员", "管理员", "老师", "学生"],
          },
        },
        {
          path: "subject",
          component: Subject,
          meta: {
            title: "学科列表",
            icon: "el-icon-notebook-2",
            fullPath: "/layout/subject",
            roles: ["超级管理员", "管理员", "老师"],
          },
        },
        // 未匹配到嵌套路由的404
        // 这个注释掉 不然 列表会多一个 还报错 因为没有meta空对象
        // 空对象点属性点属性 会报错
        // {
        //   path: "*",
        //   component: NotFound,
        // },
      ],
    },
    // 404
    {
      path: "*",
      component: NotFound,
    },
  ],
});

// 导航守卫
/**
 * 这个回调函数，在每次路由切换之前（无论是声明式导航，还是编程式导航）都会执行这个方法
 *
 * 参数1：to 表示你要去的路径
 * 参数2：from 你上一次的路径
 * 参数3：next 代表放行以及跳转指定的页面  必须要写 不然卡死 空白
 */
// 前置守卫
router.beforeEach((to, from, next) => {
  // console.log('to---', to)
  // console.log('from---', from)
  if (to.path === "/login") {
    // 登录页面直接放行 不然连登入页面都进不来卡死空白 登入页面是不需要权限 默认看到的就是登入页面
    next();
  } else {
    const token = getToken();
    if (token) {
      // 登录了
      next();
    } else {
      // 没有登录，跳转到登录页面
      next("/login");
    }
  }
});

// 后置守卫  没有next   因为后置守卫 表示都已进页面了 next是前置守卫确认是否放行进页面
router.afterEach((to, from) => {
  console.log(to);
  console.log(from);
  document.title = to.meta.title || '黑马面面';
});
export default router;